import React from 'react';
import { Link } from 'react-router-dom';
import { LogoHeader } from '../../components/Header';
import SearchBox from '../../components/SearchBox';
import Nav from './Nav';
import { Checkbox } from 'antd';
import Page from './Page';

import logo from '../../asset/images/high/highLogo2.png';
import compimg from '../../asset/images/high/high2.png';
import styles from './index.module.less';

const CheckboxGroup = Checkbox.Group;
export default class TradingMarketUser extends React.Component {
  state={
    plainOptions: [ '购买过的商铺 ( 0 ) ', '收藏过的商铺 ( 0 )' ],
    companyList: [
      {
        index: 1,
        logo: require('../../asset/images/high/highLogo2.png'),
        title: '大连塑料有限公司',
        rang: '废金属',
        addressprovince: '辽宁省',
        addressCity: '大连市',
        auth: '企业认证',
        good: '货源优质',
        date: '2019年9月19日',
        picList: [
          {
            index2: 1,
            product: require('../../asset/images/high/high2.png'),
            price: 1200,
          },
          {
            index2: 2,
            product: require('../../asset/images/high/high2.png'),
            price: 1300,
          },
          {
            index2: 3,
            product: require('../../asset/images/high/high2.png'),
            price: 1400,
          },
          {
            index2: 4,
            product: require('../../asset/images/high/high2.png'),
            price: 1500,
          },
        ],
      },
      {
        index: 2,
        logo: require('../../asset/images/high/highLogo2.png'),
        title: '大连塑料有限公司',
        rang: '废金属',
        addressprovince: '辽宁省',
        addressCity: '大连市',
        auth: '企业认证',
        good: '货源优质',
        date: '2019年9月19日',
        picList: [
          {
            index2: 1,
            product: require('../../asset/images/high/high2.png'),
            price: 1200,
          },
          {
            index2: 2,
            product: require('../../asset/images/high/high2.png'),
            price: 1300,
          },
          {
            index2: 3,
            product: require('../../asset/images/high/high2.png'),
            price: 1400,
          },
          {
            index2: 4,
            product: require('../../asset/images/high/high2.png'),
            price: 1500,
          },
        ],
      },
      {
        index: 3,
        logo: require('../../asset/images/high/highLogo2.png'),
        title: '大连塑料有限公司',
        rang: '废金属',
        addressprovince: '辽宁省',
        addressCity: '大连市',
        auth: '企业认证',
        good: '货源优质',
        date: '2019年9月19日',
        picList: [
          {
            index2: 1,
            product: require('../../asset/images/high/high2.png'),
            price: 1200,
          },
          {
            index2: 2,
            product: require('../../asset/images/high/high2.png'),
            price: 1300,
          },
          {
            index2: 3,
            product: require('../../asset/images/high/high2.png'),
            price: 1400,
          },
          {
            index2: 4,
            product: require('../../asset/images/high/high2.png'),
            price: 1500,
          },
        ],
      },
    ],

  }
  render() {
    const { plainOptions, companyList } = this.state;
    const extra = (
      <React.Fragment>
        <button className={styles.publishPriceBtn}>发布询价单</button>
        <button className={styles.publishGoodsBtn}>发布商品</button>
      </React.Fragment>
    );

    return (
      <React.Fragment>
        <LogoHeader moduleName='交易市场' rightContent={<SearchBox />} extra={extra} />
        <div className={styles.topBox}>
          {/* <button className={styles.btn}>全部分类</button> */}
          <div className={styles.textBox}>
            <span className={styles.text}>当前位置 : 交易市场 > </span>
            <button className={styles.btn2}>大连 X </button>
          </div>
        </div>
        <div className={styles.line}></div>
        <Nav/>
        <div className={styles.content}>
          <div className={styles.box1}>
            <button className={styles.d1 + ' ' + styles.pullLeft}>综合</button>
            <div className={styles.d2 + ' ' + styles.pullLeft}>
              <span>入驻时间</span>
              <div className={styles.btn1 + ' ' + styles.pullRight}>△</div>
              <div className={styles.btn2 + ' ' + styles.pullRight}>▽</div>
            </div>
            <div className={styles.d3 + ' ' + styles.pullRight}>
              <CheckboxGroup options={plainOptions} />
              <div className={styles.d4 + ' ' + styles.pullRight}>共找到（0）件商铺</div>
            </div>

          </div>
          {
            companyList.map(item => {
              return (
                <div className={styles.box2} key={item.index}>
                  <div className={styles.leftBox + ' ' + styles.pullLeft}>
                    <div>
                      <div className={styles.imgBox + ' ' + styles.pullLeft}><img src={item.logo} alt=""/></div>
                      <div className={styles.imgText + ' ' + styles.pullLeft}>{item.title}</div>
                    </div>
                    <div className={styles.clearfix}></div>
                    <div className={styles.textBox}>
                      <div className={styles.textBox1 + ' ' + styles.pullLeft}>
                        <div>经营范围:</div>
                        <div>企业地区:</div>
                        <div>资质认证:</div>
                        <div>入驻时间:</div>
                      </div>
                      <div className={styles.textBox2 + ' ' + styles.pullLeft}>
                        <div className={styles.t1}>
                          <span>{item.rang}</span>
                          <span>{item.rang}</span>
                          <span>{item.rang}</span>
                        </div>
                        <div>
                          <span>{item.addressprovince} </span>
                          <span>{item.addressCity}</span>
                        </div>
                        <div>
                          <button className={styles.btn1}>{item.auth}</button>
                          <button className={styles.btn2}>{item.good}</button>
                        </div>
                        <div>
                          <span className={styles.s1}>{item.date}</span>
                        </div>
                      </div>
                    </div>


                  </div>
                  <div className={styles.rightBox + ' ' + styles.pullRight}>
                    <div className={styles.imgBox + ' ' + styles.pullLeft}>
                      <ul>
                        {
                          companyList !== null && item.picList.map(iem => {
                            return (
                              <li key={iem.index2}>
                                <div className={styles.d1}>
                                  <img src={iem.product} alt=""/>
                                  <div className={styles.price}>{iem.price}元/吨</div>
                                </div>
                              </li>
                            );
                          }
                          )
                        }
                      </ul>
                    </div>
                    <Link to='/' className={styles.btn + ' ' + styles.pullLeft}>
                      <span>查</span><br/>
                      <span>看</span><br/>
                      <span>详</span><br/>
                      <span>情</span><br/>
                      <span>v</span>
                    </Link>
                  </div>
                </div>
              );
            })
          }
        </div>
        <Page></Page>
      </React.Fragment>
    );
  }
}
